<template>
  <view class="pages">
    <custom-bar :title="title" @height="setNavHeight" isNavbarSlot>
      <template #navbar>
        <view class="navbar">
          <view class="search">
            <view class="label">购物车</view>
            <input
              class="search_input"
              :placeholder-style="{'color':'orange'}"
              v-model="search"
              placeholder="请输入内容"
            />
          </view>
        </view>
      </template>
    </custom-bar>
    <view class="body">
      <!-- <view class="header_info">
          <lx-swiper :list="bannerList"></lx-swiper>
      </view> -->
    </view>
    <view class="sundry">
      <image class="image" src="http://139.9.40.245/colors/8.png"></image>
      <image class="image" src="http://139.9.40.245/colors/17.png"></image>
      <image class="image" src="http://139.9.40.245/colors/22.png"></image>
      <image class="image" src="http://139.9.40.245/colors/24.png"></image>
    </view>
    <tab-bar></tab-bar>
  </view>
</template>

<script setup lang="ts">
import CustomBar from "@/components/CustomBar/CustomBar.vue";
import LxSwiper from "@/components/lxSwiper/lxSwiper.vue";
import TabBar from '@/components/TabBar/TabBar.vue'
import { ref, getCurrentInstance } from "vue";
const title = ref("Hello");
const search = ref("");
const navbarHeight = ref<number>(0);
const bannerList = ref<Array<any>>([]);
const { proxy } = getCurrentInstance() as any;
const setNavHeight = (height: number) => {
  navbarHeight.value = height;
  console.log("NavHeight", height);
};
proxy.$api.bannerApi({ type: 1 }).then((res: any) => {
  bannerList.value = res.data.list;
});
</script>

<style lang="scss" scoped>
.pages {
  min-height: 100vh;
  width: 100%;
  background: url("http://139.9.40.245/colors/bg-top2.jpg") no-repeat top,
    url("http://139.9.40.245/colors/bg-bottom.jpg") no-repeat bottom, #ffffff;
  background-size: 100% 35%, 100% 16%;
  padding: 0 20rpx;
  .navbar {
    width: 100%;
    .search {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .label {
        margin:0 20rpx;
        color: #ffffff;
      }
      .search_input {
        height: 100%;
        width: 360rpx;
        border: 1rpx solid #ffffff;
        color: #ffffff;
        border-radius: 24rpx;
        padding: 6rpx 14rpx;
        font-size: 24rpx;
      }
    }
  }

  .header_info {
    padding-top: 20rpx;
    width: 710rpx;
    height: 454rpx;
  }

  .sundry {
    position: fixed;
    left: 0;
    bottom: 10rpx;
    width: 100%;
    height: 300rpx;
    pointer-events: none;

    $n: 4;
    $animationTime: 3;
    @for $i from 0 through $n {
      $delay: random($n);
      $x: random(100);
      $y: random(500);
      $randomAnimationTine: #{$animationTime + random(5) - 1}s;
      .image:nth-child(#{$i}) {
        position: absolute;
        right: 30rpx;
        bottom: 0rpx;
        width: 60rpx;
        height: 60rpx;
        transform: scale(0.5);
        animation: move-#{$i}
          $randomAnimationTine
          linear
          #{$delay *
          0.1s *
          -1}
          infinite;
      }

      @keyframes move-#{$i} {
        0% {
          opacity: 1;
          transform: scale(0.5);
          transform: translate(0, 0);
        }
        100% {
          opacity: 0.1;
          transform: scale(1);
          transform: translate(-#{$x}rpx, -#{$y}rpx);
        }
      }
    }
  }
}
</style>
